<template>
	<view class="popup" v-if="isOpen">
		<view class="masker" :class="{show: maskShow}" @tap="close"></view>
		<view class="container" :style="'bottom: ' + (mainShow ? bottom : '-1000rpx') + ';height:' + height + ';'">
			<view class="header">
				<view class="title">{{ title }}</view>
				<view class="close" @tap="close" v-if="showClose">
					<image src="/static/images/ic_close.png"></image>
				</view>
			</view>
			<view class="main">
				<slot />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			showClose: {
				type: Boolean,
				default: true
			},
			top: {
				type: String,
				default: '200rpx'
			},
			bottom: {
				type: String,
				default: '50px'
			},
			height: {
				type: String,
				default: '85%'
			}
		},
		data() {
			return {
				isOpen: false,
				maskShow: false,
				mainShow: false
			}
		},
		created() {
			
		},
		methods: {
			open() {
				this.isOpen = true
				setTimeout(() => {
					this.maskShow = true
					this.mainShow = true
				}, 10)
			},
			close() {
				this.maskShow = false
				this.mainShow = false
				setTimeout(() => {
					this.isOpen = false
				}, 200)
			},
		}
	}
</script>

<style lang="scss" scoped>
.popup {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99;
	.masker {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		background: rgba(0, 0, 0, 0.3);
		opacity: 0;
		transition: opacity 0.2s linear;
		&.show {
			opacity: 1;
		}
	}
	.container {
		position: absolute;
		width: 100%;
		left: 0;
		background: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		z-index: 2;
		transition: all 0.2s linear;
		.header {
			height: 88rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				width: 100%;
				font-size: 32rpx;
				color: #666;
				text-align: center;
			}
			.close {
				position: absolute;
				right: 12rpx;
				top: 12rpx;
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.main {
			position: absolute;
			box-sizing: border-box;
			top: 88rpx;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
}
</style>